<div class="flex gap-6 flex-wrap">
  <div>
    <input type="checkbox" id="checkbox" class="peer">
    <label for="checkbox" class="group flex items-center gap-2">
      <%= render Form::CheckboxComponent.new %>
      Checkbox
    </label>
  </div>

  <div>
    <input type="checkbox" id="checkbox" checked class="peer">
    <label for="checkbox" class="group flex items-center gap-2">
      <%= render Form::CheckboxComponent.new %>
      Checkbox
    </label>
  </div>

  <div>
    <input type="checkbox" id="checkbox" class="peer">
    <label for="checkbox" class="group flex items-center gap-2" data-focused="true">
      <%= render Form::CheckboxComponent.new %>
      Checkbox
    </label>
  </div>

  <div>
    <input type="checkbox" id="checkbox" checked class="peer">
    <label for="checkbox" class="group flex items-center gap-2" data-focused="true">
      <%= render Form::CheckboxComponent.new %>
      Checkbox
    </label>
  </div>

  <div>
    <input type="checkbox" id="checkbox" checked disabled class="peer">
    <label for="checkbox" class="group flex items-center gap-2">
      <%= render Form::CheckboxComponent.new %>
      Checkbox
    </label>
  </div>

  <div>
    <input type="checkbox" id="checkbox" disabled class="peer">
    <label for="checkbox" class="group flex items-center gap-2">
      <%= render Form::CheckboxComponent.new %>
      Checkbox
    </label>
  </div>
</div>
